<!-- 我的收藏 -->
<template>
  <div class="tabs"><switch-tabs :tabs="tabs" :selected-tab="selectedTab" @switchTab="switchTab" /></div>
  <a-spin :spinning="loadingShow" class="full-screen-spin" tip="加载中">
    <div class="center-box">
      <component :is="compMap[selectedTab]" />
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'

  import switchTabs from '@/components/SwitchTabs/index.vue'

  import HitContest from './components/HitContest.vue'

  const compMap: { [key in string]: any } = {
    hitContest: HitContest
  }

  interface Tab {
    name: string
    key: string
  }
  const route = useRoute()
  const tabs: Tab[] = [
    {
      name: '打榜竞技',
      key: 'hitContest'
    }
  ]

  const parentTab = (route.query.parentTab as string) === 'activity'
  let selectedTab = ref<string>((parentTab && (route.query.tab as string)) || tabs[0].key)
  const loadingShow = ref<boolean>(false)

  const switchTab = (key: string) => {
    selectedTab.value = key
    console.log(selectedTab.value, 'selectedTab.value')
  }
</script>

<style lang="less" scoped>
  .tabs {
    padding: 0 0 12px;
    margin-top: 100px;
  }

  .center-box {
    display: flex;
    padding-top: 20px;
    flex-direction: column;

    .center-box-right {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
      gap: 20px 20px;
    }
  }
</style>
